<style type="text/css">
*{margin:0; padding:0;}
ul,li{list-style:none;}
.clear{clear:both;}

#nav{
	width:100%; 
	white-space:nowrap; 
	overflow:hidden; 
	background:#ccc; 
	position:relative; 
	}
	
#nav li{
	float:left;
	position:relative;
	left:50%;
 	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	}
	
#nav .a1{margin-left:-240px;} 
#nav .a2{margin-left:-160px;} 
#nav .a3{margin-left:-80px;}

#nav li a{ 
	display:block;  
	text-align:center; 
	line-height:28px; 
	background:#ccc; 
	color:#000; 
	width:80px; 
	height:28px;
	}
</style>

<ul id="nav">
       <li class="a1"><a href="#">home</a></li>
       <li class="a2"><a href="#">advice</a></li>
       <li class="a3"><a href="#">page</a></li>
       <li><a href="#">people</a></li>
       <li><a href="#">service</a></li>
   </ul>